import React, { useState } from 'react';
import Message from '../Message';
import {Sticky} from 'react-vant'

function ChatRoom() {
    const [messages, setMessages] = useState([]);
    const [input, setInput] = useState('');

    const sendMessage = () => {
        if(input.trim()) {
            const newMessage = { text: input, timestamp: Date.now() };
            setMessages([...messages, newMessage]);
            setInput('');
        }
    };

    return (
        <div className='box-po'>
            <div>
                {messages.map((msg, index) => (
                    <Message key={index} text={msg.text} timestamp={msg.timestamp} />
                ))}
            </div>
           <div className='mainbox'>
            <Sticky offsetBottom={0}>
                 <input 
                value={input}
                onChange={(e) => setInput(e.target.value)}
                onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
            />
            <button onClick={sendMessage}>Send</button>
            </Sticky>
           </div>
        </div>
    );
}

export default ChatRoom;

